<%-- 
    Document   : participantlist
    Created on : Aug 10, 2011, 3:35:07 PM
    Author     : s4201567 Tony Yu
--%>

<script type="text/javascript">   
var counter = 1;
var limit = 10;
function addInput(divName){
     name = prompt("Please enter a field");
    
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = name + ": <input type='text' name='myInputs[]'>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}
</script>       
<script src="/wp-includes/js/addInput.js" language="Javascript" type="text/javascript"></script>

<style type="text/css">
    #master-title {
        text-align:center;
    }
    
    #list-form {
        padding-left:80px;
    }
    
    .part-table {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    width:80%;
    border:1px solid #009933;
    text-align:center;
    }
    .part-table td, .part-table th .part-table tr {
    font-size:1em;    
    border:1px solid #009933;
    padding:3px 7px 2px 17px;
    }
    .part-table th {
    font-size:1.1em;
    text-align:center;
    padding-top:5px;
    padding-bottom:4px;
    background-color:#008833;
    color:#ffffff;
    }
</style>

<%@ include file="../header.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <div id="content-container1">
        <div id="content">
            
            <div id="master-title">
                <h3>Participant Details</h3>
            </div>
            <!-- Content goes here -->
            <%
                Object uid = request.getParameter("uid");
            %>
            <div id="list-form">
              <form:form method="post" commandName="partListDetails">
                  <table class="part-table">
                    <tr>
                        <th>Fields</th>
                        <th>Details</th>
                    </tr>
                    <tr>
                        <td>User ID:</td>
                        <td>
                            <%=uid%>
                        </td>
                    </tr>
                    <tr>                 
                        <td align="center" width="20%">Address:</td>
                        <td width="20%"><form:input path="address" /></td>
                    </tr>
                    <tr>
                        <td align="center" width="20%">City</td>
                        <td width="20%"><form:input path="city" /></td>
                    </tr>
                    <tr>
                        <td align="center" width="20%">PostCode:</td>
                        <td width="20%"><form:input path="postCode" /></td>
                    </tr>
                    <tr>
                        <td align="center" width="20%">State:</td>
                        <td width="20%"><form:input path="state" /></td>
                    </tr>
                    <tr>
                       <td align="center" width="20%">Country:</td>
                        <td width="20%"><form:input path="country" /></td>
                    </tr>
                    <tr>
                        <td align="center" width="20%">Department:</td>
                        <td width="20%"><form:input path="department" /></td>
                    </tr>
                    <tr>
                        <td align="center" width="20%">Company:</td>
                        <td width="20%"><form:input path="company" /></td>
                    </tr>
                    <tr>
                        <td align="center" width="20%">Email:</td>
                        <td width="20%"><form:input path="email" /></td>
                    </tr>
                    <tr>
                        <td align="center" width="20%">Fax:</td>
                        <td width="20%"><form:input path="fax" /></td>
                    </tr>
                    <tr>
                        <td align="rcenteright" width="20%">Phone:</td>
                        <td width="20%"><form:input path="phone" /></td>
                    </tr>
                    <tr>
                        <td align="center" width="20%">Title:</td>
                        <td width="20%"><form:input path="title" /></td>
                    </tr>
                    <tr>
                        <td align="center" width="20%">Voting:</td>
                        <td width="20%"><form:input path="voting" /></td>
                    </tr>
                    <tr>
                        <td align="center" width="20%">Field:</td>
                        <td width="20%"><form:input path="field" /></td>
                    </tr>
                    <%--
                    <tr>
                        <td align="right" width="20%">Add Field:</td>
                        <td width="20%">
                        <form:select path="field">
                            <form:options items="${field}" /><input type="button" value="Add" name="add" onclick="addInput('dynamicInput');">
                        </form:select>
                        </td>
                    </tr> 
                    --%>
                  </table>

                <div id="dynamicInput">
                    <input type="hidden" name="myInputs[]">
                </div>
                <br/>
                <input type="submit" align="center" value="Update">
                <input type="reset" value="Reset" name="reset"><br/><br/>
                <input type="button" value="Back" onClick="javascript: history.go(-1)">
                </form:form>
            </div>
        </div>		

<%@ include file="../footer.jsp" %>
